<script setup lang="ts">
import type { LevelSiderBarType } from '../types'

defineProps<{ type?: LevelSiderBarType }>()
</script>

<template>
  <div
    class="level-sider-bar"
    :class="{ 'is-error': type === 'error', 'is-warning': type === 'warning' }">
    <span class="text">L1</span>
    <div class="status-wrapper">
      <!-- 箭头 -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="8"
        height="99"
        viewBox="0 0 8 99"
        fill="none">
        <path
          d="M3.64644 98.3536C3.8417 98.5488 4.15829 98.5488 4.35355 98.3536L7.53553 95.1716C7.73079 94.9763 7.73079 94.6597 7.53553 94.4645C7.34027 94.2692 7.02369 94.2692 6.82842 94.4645L4 97.2929L1.17157 94.4645C0.976307 94.2692 0.659724 94.2692 0.464462 94.4645C0.2692 94.6597 0.2692 94.9763 0.464462 95.1716L3.64644 98.3536ZM3.5 -2.18557e-08L3.5 1.53125L4.5 1.53125L4.5 2.18557e-08L3.5 -2.18557e-08ZM3.5 4.59375L3.5 7.65625L4.5 7.65625L4.5 4.59375L3.5 4.59375ZM3.5 10.7187L3.5 13.7812L4.5 13.7813L4.5 10.7188L3.5 10.7187ZM3.5 16.8437L3.5 19.9062L4.5 19.9063L4.5 16.8438L3.5 16.8437ZM3.5 22.9687L3.5 26.0312L4.5 26.0313L4.5 22.9688L3.5 22.9687ZM3.5 29.0937L3.5 32.1562L4.5 32.1563L4.5 29.0938L3.5 29.0937ZM3.5 35.2187L3.5 38.2812L4.5 38.2813L4.5 35.2188L3.5 35.2187ZM3.5 41.3437L3.5 44.4062L4.5 44.4063L4.5 41.3438L3.5 41.3437ZM3.5 47.4687L3.5 50.5312L4.5 50.5313L4.5 47.4688L3.5 47.4687ZM3.5 53.5937L3.5 56.6562L4.5 56.6563L4.5 53.5938L3.5 53.5937ZM3.5 59.7187L3.5 62.7812L4.5 62.7813L4.5 59.7188L3.5 59.7187ZM3.5 65.8437L3.5 68.9062L4.5 68.9063L4.5 65.8438L3.5 65.8437ZM3.5 71.9687L3.5 75.0312L4.5 75.0313L4.5 71.9688L3.5 71.9687ZM3.5 78.0937L3.5 81.1562L4.5 81.1563L4.5 78.0938L3.5 78.0937ZM3.5 84.2187L3.5 87.2812L4.5 87.2813L4.5 84.2188L3.5 84.2187ZM3.5 90.3437L3.5 93.4062L4.5 93.4063L4.5 90.3438L3.5 90.3437ZM3.5 96.4687L3.5 98L4.5 98L4.5 96.4688L3.5 96.4687Z"
          fill="var(--level-sider-bar-color)" />
      </svg>

      <!-- 缺少 L1 层级节点，请求将无法解析 error -->
      <div v-if="type === 'error'" class="message-content cascader-tooltip">
        缺少 L1 层级节点，请求将无法解析
      </div>

      <!-- 缺少 L2 层级节点， L1 层级节点直接向源站回源 warning -->
      <i-icons-error v-if="type === 'error'" class="status-icon" />
      <div v-if="type === 'warning'" class="message-content cascader-tooltip">
        缺少 L2 层级节点， L1 层级节点直接向源站回源
      </div>
      <i-icons-suggest v-if="type === 'warning'" class="status-icon" />
    </div>
    <span class="text">L2</span>
  </div>
</template>

<style lang="less" scoped>
.level-sider-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--cdn-cascader-level-sider-bar-width);
  min-width: var(--cdn-cascader-level-sider-bar-width);
  gap: var(--cdn-cascader-level-sider-bar-gap);
  position: relative;
  --level-sider-bar-color: #adafb2;
  .text {
    @apply !text-[#8F959E] text-sm/22px font-700;
  }
  &.is-error {
    cursor: pointer;
    --level-sider-bar-color: var(--cdn-cascader-danger);
  }
  &.is-warning {
    cursor: pointer;
    --level-sider-bar-color: var(--cdn-cascader-primary);
  }
  .status-wrapper {
    position: relative;

    .status-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .message-content {
      top: 50%;
      left: 18px;
      &::before {
        top: calc(50%);
        left: -5px;
      }
    }
  }

  &:hover {
    .message-content {
      display: block;
      opacity: 1;
    }
  }
}
</style>
